<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/element/element.css">
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/common.css">
<style>
    #dispatchDetail {
        background: #fff;
        border-radius: 10px 10px 0px 0px;
        color: #444;
        font-weight: 500;
    }

    .demo-dispatchForm {
        height: calc(100vh - 110px);
        overflow-y: auto;
        padding-right: 25px;
    }

    .demo-dispatchForm::-webkit-scrollbar {
        width: 6px;
    }

    .demo-dispatchForm::-webkit-scrollbar-thumb {
        width: 6px;
        background: #e6e6e6;
        height: 20px;
        border-radius: 3px;
    }

  

    .pagination,
    .el-pagination {
        margin: 0;
    }

    .el-pagination__sizes {
        display: none !important;
    }

    [v-cloak] {
        display: none
    }
</style>
<script src="__CDN__/assets/addons/shopro/libs/vue.js"></script>
<script src="__CDN__/assets/addons/shopro/libs/element/element.js"></script>
<script src="__CDN__/assets/addons/shopro/libs/moment.js"></script>
<div id="dispatchDetail" v-cloak>
    <el-form :model="dispatchForm" ref="dispatchForm" :rules="rules" label-width="100px" class="demo-dispatchForm">
        <el-form-item label="模板名称：" prop="name">
            <el-input v-model="dispatchForm.name" placeholder="请输入模板名称"></el-input>
        </el-form-item>
        <el-form-item label="配送门店：" prop="store_ids">
            <div class="display-flex">
                <div style="flex: 1;">
                    <el-select style="position: relative;" v-model="dispatchForm.store_ids" multiple filterable
                        placeholder="" :filter-method="dataFilter">
                        <el-option v-for="item in storeOptions" :key="item.name" :label="item.name" :value="item.id">
                            <div class="display-flex" style="justify-content: space-around;">
                                <span>{{ item.id }}</span>
                                <div class="ellipsis-1" style="width: 80px;">{{ item.name }}</div>
                                <div class="ellipsis-1" style="width: 280px;">
                                    {{item.province_name}}{{item.city_name}}{{item.area_name}}{{item.address}}
                                </div>
                            </div>
                        </el-option>
                        <div class="text-center display-flex"
                            style="position: sticky;background: #fff;height:32px;top:0;z-index:1;justify-content: center;">
                            <el-pagination class="pagination" :page-sizes="[6]" :current-page="currentPage"
                                :total="totalPage" layout="total, sizes, prev, pager,next, jumper" pager-count="5"
                                @size-change.stop="pageSizeChange" @current-change="pageCurrentChange" />
                            </el-pagination>
                            <div class="theme-color cursor-pointer" style="margin-left: 8px;" @click="getstoreOptions">
                                跳转
                            </div>
                        </div>
                    </el-select>
                </div>
                <div class="create-store theme-color cursor-pointer" @click="createStore">新增门店</div>
            </div>
        </el-form-item>
    </el-form>
    <div class="dialog-footer display-flex">
        <div @click="dispatchSub" class="dialog-cancel-btn display-flex-c cursor-pointer">取消</div>
        <div @click="dispatchSub('yes','dispatchForm')" class="dialog-define-btn display-flex-c cursor-pointer">确定</div>
    </div>
</div>